<!doctype html>
<html lang="en-us">

    <head>

        <!-- Meta -->
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1">

        <title>米环4在线解包/打包工具</title>
        <meta name="description" content>

        <!-- The compiled CSS file -->
        <link rel="stylesheet" href="css/production.css">

        <!-- Web fonts -->
        <link href="css/font.css" rel="stylesheet"> 

        <!-- favicon.ico. Place these in the root directory. -->
        <link rel="shortcut icon" href="favicon.ico">
	    <link rel="stylesheet" href="index.css">
	    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> 
    </head>

    <body>
	<style>
	input[type=file]{
		display:none;
	}

	.pt3 {
		padding-top:20px;
	}

	@media screen and (min-width: 120px) and (max-width: 600px) {
		.mb2 {
			font-size:30px;
		}

		.logo {
			max-height:150px;
		}
	}
	</style>

    <!-- Header -->
    <header class="align--center pt3">
        <div class="container--lg border--bottom pb3">
            <img class="logo mb3" src="img/logo.png" alt="Carta">
            <h1 class="mb2">米环4在线解包/打包工具</h1>
			<div id="app">
				<div v-loading="loading">
					<el-alert title="解包请选择bin文件，打包请选择zip文件" type="info" :closable="false" show-icon>
					</el-alert>
					<br>
					<el-upload class="upload-demo" ref="upload" :action="baseUrl + 'watchfacepackage/upload'" :on-preview="handlePreview" :on-remove="handleRemove" :before-upload="beforeUpload" :file-list="fileList" :on-success="onSuccess" :on-error="onError" :auto-upload="true" name="file">
					  <el-button slot="trigger" size="small" type="success">选取文件并上传</el-button>
					  <div slot="tip" class="el-upload__tip">只能上传zip/bin文件，且不超过10M</div>
					</el-upload>
					<el-dialog :visible.sync="visible" title="Hello world">
					  <p>Try Element</p>
					</el-dialog>
				</div>
				<br>
				<el-button type="text" @click="gotoApp">安卓APP下载</el-button>
			  </div>
        </div>
    </header>

    <main>

        <!-- Feature list -->
        <div class="container pt3 mt2 text--gray align--center">
            <p class="mb3">Powered by&nbsp;GiveMeFive</p>
            <!-- <div class="grid-row">
                <div class="grid-column span-one-third mb3">
                    <img class="illustration--small mb1" src="img/assign.svg" alt="Assign to others">
                    <p>Assign to others</p>
                </div>
                <div class="grid-column span-one-third mb3">
                    <img class="illustration--small mb1" src="img/connected.svg" alt="Stay connected">
                    <p>Stay connected</p>
                </div>
                <div class="grid-column span-one-third mb3">
                    <img class="illustration--small mb1" src="img/search.svg" alt="Powerful search">
                    <p>Powerful search</p>
                </div>
                <div class="grid-column span-one-third mb3">
                    <img class="illustration--small mb1" src="img/vault.svg" alt="Put in a vault">
                    <p>Put in a vault</p>
                </div>
                <div class="grid-column span-one-third mb3">
                    <img class="illustration--small mb1" src="img/messaging.svg" alt="Fast messaging">
                    <p>Fast messaging</p>
                </div>
                <div class="grid-column span-one-third mb3">
                    <img class="illustration--small mb1" src="img/mail.svg" alt="Share with others">
                    <p>Share with others</p>
                </div>
            </div> -->
        </div>
    </main>

    <!-- Footer -->
    <!-- <footer class="pt1 pb3 align--center-on-mobile">
        <div class="container">
            <div class="grid-row">
            </div>
        </div>
    </footer> -->
	<!-- import Vue before Element -->
  <script src="vue.min.js"></script>
  <!-- import JavaScript -->
  <script src="index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { 
        	baseUrl: 'http://212.64.68.41:8086/',
	        visible: false ,
	        fileList:[],
	        loading:false
        }
      },
      methods: {
	      submitUpload(file, fileList) {
	        this.$refs.upload.submit();
	      },
	      handleRemove(file, fileList) {
	        console.log(file, fileList);
	      },
	      handlePreview(file) {
	        console.log(file);
	      },
	      onSuccess(response, file, fileList){
	        this.loading = false;
	        if(response.code == 0){
	        	this.$message({
					message: '操作成功，即将开始下载',
					type: 'success'
				})
	        	window.location.href = this.baseUrl + '/watchfacepackage/download?filePath=' + response.data;
	        } else {
	        	this.$message({
					message: response.msg,
					type: 'warning'
				})
	        }
			this.fileList = [];
	      },
	      onError(err, file, fileList){
	      	this.loading = false;
	      	if(err.msg){
				this.$message({
					message: err.msg,
					type: 'warning'
				})
	      	} else {
				this.$message({
					message: '服务器错误，请稍后再试',
					type: 'warning'
				})
	      	}
			this.fileList = [];
	      	
	      },
	      beforeUpload(file){
			var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)                
			const extension = testmsg === 'bin'
			const extension2 = testmsg === 'zip'
			const isLt2M = file.size / 1024 / 1024 < 10
			if(!extension && !extension2) {
				this.$message({
					message: '上传文件只能是 bin、zip!',
					type: 'warning'
				});
			}
			if(!isLt2M) {
				this.$message({
					message: '上传文件大小不能超过 10MB!',
					type: 'warning'
				});
			}
			let result = extension || extension2 && isLt2M;
			if(result){
				this.loading = true;
			}
			return result;
	      },
		  gotoApp(){
			window.open('https://www.coolapk.com/apk/tech.pingx.watchface');
		  }
	    }
    })
  </script>
    </body>
</html>